<template>
    <div class="wid1000 offcnlogin" id="loginoffcn1000">
        <div class="offcnloginleft2 fl">
            <form class="demoform" action="#" id="form_login">
                <input type="hidden" name="url_home" value="" id="url_home">
                <ul>
                    <li>
                        <span>手机：</span>
                        <input name="username" v-model="userInfo.name" @blur="checkUserName" type="text" id="username_dl" class="input262" value="请输入手机号"  >
                        <em id="J_usernameTip" v-show="!userInfoValid.name.ok">{{userInfoValid.name.tip}}</em>
                    </li>
                    <li>
                        <span>密码：</span>
                        <input name="password" v-model="userInfo.password" @blur="checkPassword" type="password" class="input262" id="password_dl" placeholder="请输入密码">
                        <em id="J_passwordTip" v-show="!userInfoValid.password.ok">{{userInfoValid.password.tip}}</em>
                    </li>
                    <li class="loginleft_2"><input name="" @click="userLogin" type="button" value="登录" class="loginbutton1 lgb_bgc"></li>
                    <li class="loginleft_3"><a href="/foreuser/forget/">找回密码</a><a href="/foreuser/register/">注册</a>
                    </li>
                </ul>
            </form>
        </div>
        <div class="offcnloginright">
            <p>使用合作账号一键登录：</p>
            <p>
                <a href="http://login.offcn.com/connect2/c/oauth/index.php?type=5&amp;uri=http://xue.ujiuye.com" class="dsf_qq"></a>
                <a href="http://login.offcn.com/connect2/x/index.php?type=5&amp;uri=http://xue.ujiuye.com" class="dsf_qx"></a>
                <a href="http://login.offcn.com/connect2/w/index.php?type=5&amp;uri=http://xue.ujiuye.com" class="dsf_wb"></a>
            </p>
            <dl>
                <dt>用户专享服务：</dt>
                <dd>极致的视频学习体验</dd>
                <dd>丰富的直播课程免费学</dd>
                <dd>开课提醒，不错过每一次精彩</dd>
                <dd>讲、学、练、考，多种高效学习方式快速提升成绩</dd>
            </dl>
        </div>

    </div>
</template>

<script>
    import {userSignInAPI} from "../network/usercenter";

    export default {
        name:'UserLogin',
        data:function () {
            return {
                userInfo:{
                    name:'',
                    password:''
                },
                userInfoValid:{
                    name:{
                        ok:false,
                        tip:''
                    },
                    password:{
                        ok:false,
                        tip:''
                    }
                }
            }
        },created() {
            this.$emit('showCate',false)
        },
        methods:{
            checkUserName:function () {
                let reg=/^1[3456789]\d{9}$/
                if(this.userInfo.name!=='' && reg.test(this.userInfo.name)){
                    this.userInfoValid.name.ok=true

                }else{
                    this.userInfoValid.name.ok=false
                    this.userInfoValid.name.tip='请输入正确的用户名'
                }

            },
            checkPassword:function () {
                if(this.userInfo.password.length<6){
                    this.userInfoValid.password.ok=false
                    this.userInfoValid.password.tip='密码至少6位'
                }else{
                    this.userInfoValid.password.ok=true
                }

            },
            userLogin:function () {
                if(this.userInfoValid.name.ok && this.userInfoValid.password.ok){
                    //调用登录API
                    userSignInAPI(this.userInfo)
                    .then(res=>{
                        console.log(res.token)
                        //返回Token
                        localStorage.setItem('TOKEN',res.token)
                        this.$router.replace("/")
                        this.$emit('showCate',true)
                        //刷新用户状态
                        this.$store.dispatch('refreshUserInfo')

                    })
                    .catch(error=>{
                        alert('登录失败'+error.message)
                    })

                }
            }

        }
    }

</script>

<style>
    .offcnlogin {
        height: auto;
        overflow: hidden;
        padding: 65px 0 50px 0;
    }
    .wid1000 {
        width: 1000px;
        margin: 0 auto;
    }
    .offcnloginleft2 {
        width: 529px;
        border-right: 1px solid #e7e7e7;
        overflow: hidden;
    }
    .fl {
        float: left;
    }
    .offcnloginleft2 ul li {
        margin-bottom: 15px;
        position: relative;
    }
    .offcnloginleft2 ul li span {
        display: inline-block;
        width: 70px;
        text-align: right;
        font-size: 14px;
        color: #333;
    }
    .input262 {
        width: 260px;
        height: 36px;
        border: 1px solid #ddd;
        color: #999;
        padding: 0 0 0 2px;
        vertical-align: middle;
    }
    .offcnloginleft2 ul .loginleft_2 {
        padding: 0 0 0 75px;
    }
    .lgb_bgc {
        background-color: #ff4a00;
    }
    .loginbutton1 {
        width: 265px;
        height: 42px;
        border: none;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
    }
    .offcnloginleft2 ul .loginleft_3 {
        padding: 0 0 0 225px;
    }
    .offcnloginleft2 ul li {
        margin-bottom: 15px;
        position: relative;
    }
    .offcnloginleft2 ul .loginleft_3 a {
        margin-right: 15px;
    }
    .offcnloginright {
        width: 365px;
        padding: 0 0 0 102px;
        overflow: hidden;
    }
    .offcnloginright p {
        font-size: 14px;
        color: #333;
        margin-bottom: 20px;
    }
    .offcnloginright p .dsf_qq {
        background: url(../../public/login/publictest/images/dsf_03.jpg) no-repeat;
    }
    .offcnloginright p .dsf_qx {
        background: url(../../public/login/publictest/images/dsf_07.jpg) no-repeat;
    }
    .offcnloginright p .dsf_wb {
        background: url(../../public/login/publictest/images/dsf_05.jpg) no-repeat;
    }
    .offcnloginright p a {
        display: inline-block;
        width: 45px;
        height: 45px;
        margin: 0 15px 10px 0;
    }
    .offcnloginright dl dt {
        font-size: 14px;
        color: #333;
        margin-bottom: 10px;
    }
    .offcnloginright dl dd {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #666;
    }
</style>